
// react
import React, { useState } from "react";
// lib
import { Layout, Card, Form, Button, Input } from "antd";
import { UserOutlined, LockOutlined, PictureOutlined } from "@ant-design/icons";
import dayjs from "dayjs";
import { Link, Navigate } from "react-router-dom";
// components & widget
// style
import "./style.scss";
// config
import { ROUTE_MAIN_VIEW, ROUTE_REGISTER_VIEW } from "project/config";
import { APP_SETTING } from "config/setting";
import { APP_VERSION } from "config/env";
import { NAME_LENGTH_RULE, PWD_LENGTH_RULE } from "project/validRules";
import { REQUIRED_RULE } from "utils/validator";
// script & methods & public
import timeUtils from "utils/timeUtils";
import logUtils from "utils/logUtils";
// store
import { observer } from "mobx-react";
import { userState } from "state/global";
// controller
import { userLogin } from "./controller";
import { getCodeService } from "biz/Auth/service";
// interface
// 其它

const createCopyright = () => {
  const begin = timeUtils.format(new Date(), 3);
  const end = timeUtils.format(dayjs(begin).add(10, "y"), 3);

  return `Copyright © ${begin} - ${end}`;
};

function Login() {
  const [form] = Form.useForm();
  const isLogin = userState.isLogin();
  const [code, setCode] = useState(getCodeService());
  const [loading, setLoading] = useState(false);
  const getCode = () => {
    const co = getCodeService();
    setCode(co);
  };

  const handleOk = async () => {
    setLoading(true)
    const result = await form.validateFields();
    const { username, password, randCode } = result;
    userLogin(
      {
        username,
        password,
        randCode,
        code
      },
      setLoading,
      getCode)
  }
  // 根据状态自动重定向
  logUtils.info("访问Login - 是否登录", isLogin);
  if (isLogin) {
    return <Navigate to={`/${ROUTE_MAIN_VIEW}`} replace={true} />;
  }

  return (
    <Layout className="login-view">
      <Card bordered hoverable className="login-card">
        <h1 className="system-name">{APP_SETTING.APP_NAME}</h1>
        <Form
          name="loginForm"
          size="large"
          onFinish={handleOk}
          form={form}
        >
          <Form.Item
            name="username"
            rules={[REQUIRED_RULE("请填写账户名"), NAME_LENGTH_RULE]}
          >
            <Input
              prefix={<UserOutlined />}
              placeholder={`账户名, ${NAME_LENGTH_RULE.message}`}
              maxLength={NAME_LENGTH_RULE.max}
              allowClear
            />
          </Form.Item>
          <Form.Item
            name="password"
            rules={[REQUIRED_RULE("请填写密码"), PWD_LENGTH_RULE]}
          >
            <Input.Password
              prefix={<LockOutlined />}
              placeholder={`输入密码, ${PWD_LENGTH_RULE.message}`}
              maxLength={PWD_LENGTH_RULE.max}
              allowClear
            />
          </Form.Item>
          <Form.Item className="mb-10">
            <Form.Item
              name="randCode"
              style={{ display: "inline-block", width: "60%" }}
              rules={[
                REQUIRED_RULE("填写验证码"),
                {
                  len: 4,
                  message: "验证码为4位",
                },
              ]}
            >
              <Input
                size="large"
                prefix={<PictureOutlined />}
                placeholder="4位验证码"
                maxLength={4}
                allowClear
              />
            </Form.Item>
            <div
              style={{
                display: "inline-block",
                width: "38%",
                height: "36px",
                marginLeft: "2%",
              }}
            >
              <button
                type="button"
                className="login-code-btn"
                onClick={getCode}
              >
                <img
                  alt="验证码"
                  src={code}
                  className="img-res"
                  onError={() => {
                    setCode("");
                  }}
                />
              </button>
            </div>
          </Form.Item>
          <Form.Item>
            <Button
              type="primary"
              htmlType="submit"
              size="large"
              block
              loading={loading}
            >
              登录
            </Button>
          </Form.Item>

        </Form>
        <div className="login-reg">
        <span className="mr-10 ">没有账号？<Link to={`/${ROUTE_REGISTER_VIEW}`}>立即注册</Link></span>
        <span className="mr-10 "><Link to={`/${ROUTE_REGISTER_VIEW}`}>忘记密码</Link></span>
        </div>
        
        
      </Card>
      <h6 className="system-info">
        <span className="mr-10">{APP_VERSION}</span>
        <span>{createCopyright()}</span>
      </h6>
    </Layout>
  );
}

export default observer(Login);
